<template>
	<view>
		<view class="address-window" :class="address.address == true ? 'on' : ''">
			<view class="title">
				选择地址
				<text class="iconfont icon-guanbi" @tap="close"></text>
			</view>
			<view class="list">
				<view
					class="item acea-row row-between-wrapper"
					:class="active == index ? 'font-color' : ''"
					v-for="(item, index) in addressList"
					@tap="tapAddress(index, item.id)"
					:key="index"
				>
					<text class="iconfont icon-ditu" :class="active == index ? 'font-color' : ''"></text>
					<view class="address">
						<view class="name" :class="active == index ? 'font-color' : ''">
							{{ item.realName }}
							<text class="phone">{{ item.phone }}</text>
						</view>
						<view class="line1">{{ item.province }}{{ item.city }}{{ item.district }}{{ item.detail }}</view>
					</view>
					<text class="iconfont icon-complete" :class="active == index ? 'font-color' : ''"></text>
				</view>
			</view>
			<!-- 无地址 -->
			<view class="pictrue" v-if="!is_loading && !addressList.length"><image class="image" src="../../static/images/noAddress.png"></image></view>
			<view class="addressBnt bg-color" @tap="goAddressPages">选择其地址</view>
		</view>
		<view class="mask" catchtouchmove="true" :hidden="address.address == false" @tap="close"></view>
	</view>
</template>

<script>
import { getAddressList } from '@/api/user.js';
export default {
	props: {
		pagesUrl: {
			type: String,
			default: ''
		},
		address: {
			type: Object,
			default: function() {
				return {
					address: true,
					addressId: 0
				};
			}
		},
		isLog: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			active: 0,
			//地址列表
			addressList: [],
			is_loading: true
		};
	},

	methods: {
		tapAddress: function(e, addressid) {
			this.active = e;
			this.$emit('OnChangeAddress', addressid);
		},
		close: function() {
			this.$emit('changeClose');
			this.$emit('changeTextareaStatus');
		},
		goAddressPages: function() {
			this.$emit('changeClose');
			this.$emit('changeTextareaStatus');
			uni.navigateTo({
				url: this.pagesUrl
			});
		},
		getAddressList: function() {
			let that = this;
			getAddressList({
				page: 1,
				limit: 5
			}).then(res => {
				let addressList = res.data.list;
				//处理默认选中项
				for (let i = 0, leng = addressList.length; i < leng; i++) {
					if (addressList[i].id == that.address.addressId) {
						that.active = i;
					}
				}
				that.$set(that, 'addressList', addressList);
				that.is_loading = false;
			});
		}
	}
};
</script>

<style scoped lang="scss">
.address-window {
	background-color: #fff;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 101;
	transform: translate3d(0, 100%, 0);
	transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
}

.address-window.on {
	transform: translate3d(0, 0, 0);
}

.address-window .title {
	font-size: 32rpx;
	font-weight: bold;
	text-align: center;
	height: 123rpx;
	line-height: 123rpx;
	position: relative;
}

.address-window .title .iconfont {
	position: absolute;
	right: 30rpx;
	color: #8a8a8a;
	font-size: 35rpx;
}

.address-window .list .item {
	margin-left: 30rpx;
	padding-right: 30rpx;
	border-bottom: 1px solid #eee;
	height: 129rpx;
	font-size: 25rpx;
	color: #333;
}

.address-window .list .item .iconfont {
	font-size: 37rpx;
	color: #2c2c2c;
}

.address-window .list .item .iconfont.icon-complete {
	font-size: 30rpx;
	color: #fff;
}

.address-window .list .item .address {
	width: 560rpx;
}

.address-window .list .item .address .name {
	font-size: 28rpx;
	font-weight: bold;
	color: #282828;
	margin-bottom: 4rpx;
}

.address-window .list .item .address .name .phone {
	margin-left: 18rpx;
}

.address-window .addressBnt {
	font-size: 30rpx;
	font-weight: bold;
	color: #fff;
	width: 690rpx;
	height: 86rpx;
	border-radius: 43rpx;
	text-align: center;
	line-height: 86rpx;
	margin: 85rpx auto;
}

.address-window .pictrue {
	width: 414rpx;
	height: 336rpx;
	margin: 0 auto;
}

.address-window .pictrue .image {
	width: 100%;
	height: 100%;
}
</style>
